<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  <title>大众点评</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="./css/element.css">

  <link href="./css/blog-detail.css" rel="stylesheet">
  <link href="./css/main.css" rel="stylesheet">

  <style type="text/css">
    .header{
        position: relative;
    }
    .foot-view span{
        font-size: 12px;
    }
    .liked{

    }
  </style>
</head>
<body>
<div id="app">
<el-drawer
	      :size="size"
		  :title="title"
		  :visible.sync="drawer"
		  :direction="direction"
		>
 
	<div v-if="this.isPinJia">
    <el-input style="margin-top:6px" type="textarea" v-model="message" :placeholder="placeholder"  cols="40" rows="6"  maxlength="100" minlength="2" show-word-limit required></el-input>
	<el-button style="margin-top:10px" type="primary" :plain="true" @click="onSubmit" >发送</el-button>
	</div>
	
	<!-- 自己的博客可删除 -->
	<div v-else style="width:100%;font-size:19px;text-align: center;" @click="deleteBlog" v-show="user.id === blog.userId ">
	<hr>
	删除
	<hr>
	</div>
	<!-- 别人的博客可举报 -->
	<div  style="width:100%;font-size:19px;text-align: center;"  v-show="user.id !== blog.userId " @click="jubao">
	<hr>
	举报
	<hr>
	</div>
</el-drawer>
  <div class="header">
    <div class="header-back-btn" @click="goBack"><i class="el-icon-arrow-left"></i></div>
    <div class="header-title"></div>
    <div class="header-share" @click="direction='btt';drawer=true;title='操作';isPinJia=false;size='20%'">...</div>
  </div>
  <div style="height: 85%; overflow-y: scroll; overflow-x: hidden">
    <div class="blog-info-box" ref="swiper"
         @touchstart="moveStart"
         @touchmove="moving"
         @touchend="moveEnd">
      <div class="swiper-item" v-for="(img, i) in blog.images" :key="i">
        <img :src="img" alt="" style="width: 100%" height="100%">
      </div>
    </div>
    <div class="basic">
      <div class="basic-icon" @click="toOtherInfo">
        <img :src="blog.icon || '/imgs/icons/default-icon.png'" alt="">
      </div>
      <div class="basic-info">
        <div class="name">{{blog.name}}</div>
        <span class="time">{{formatTime(new Date(blog.createTime))}}</span>
      </div>
      <div style="width: 20%">
        <div class="logout-btn" @click="follow" v-show="!user || user.id !== blog.userId ">
          {{followed ? '取消关注' : '关注'}}
        </div>
      </div>

    </div>
    <div class="blog-text" v-html="blog.content">
    </div>
    <div class="shop-basic" v-if="shop.name">
      <div class="shop-icon">
        <img :src="shop.image" alt="">
      </div>
      <div style="width: 80%" >
        <div class="name">{{shop.name}}</div>
        <div>
          <el-rate
              v-model="shop.score/10">
          </el-rate>
        </div>
          <div class="shop-avg">￥{{shop.avgPrice}}/人</div>
      </div>
    </div>
    <div class="zan-box">
      <div>
        <svg t="1646634642977" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2187" width="20" height="20">
          <path d="M160 944c0 8.8-7.2 16-16 16h-32c-26.5 0-48-21.5-48-48V528c0-26.5 21.5-48 48-48h32c8.8 0 16 7.2 16 16v448zM96 416c-53 0-96 43-96 96v416c0 53 43 96 96 96h96c17.7 0 32-14.3 32-32V448c0-17.7-14.3-32-32-32H96zM505.6 64c16.2 0 26.4 8.7 31 13.9 4.6 5.2 12.1 16.3 10.3 32.4l-23.5 203.4c-4.9 42.2 8.6 84.6 36.8 116.4 28.3 31.7 68.9 49.9 111.4 49.9h271.2c6.6 0 10.8 3.3 13.2 6.1s5 7.5 4 14l-48 303.4c-6.9 43.6-29.1 83.4-62.7 112C815.8 944.2 773 960 728.9 960h-317c-33.1 0-59.9-26.8-59.9-59.9v-455c0-6.1 1.7-12 5-17.1 69.5-109 106.4-234.2 107-364h41.6z m0-64h-44.9C427.2 0 400 27.2 400 60.7c0 127.1-39.1 251.2-112 355.3v484.1c0 68.4 55.5 123.9 123.9 123.9h317c122.7 0 227.2-89.3 246.3-210.5l47.9-303.4c7.8-49.4-30.4-94.1-80.4-94.1H671.6c-50.9 0-90.5-44.4-84.6-95l23.5-203.4C617.7 55 568.7 0 505.6 0z" p-id="2188" :fill="blog.isLike ? '#ff6633' : '#82848a'"></path>
        </svg>
      </div>
      <div class="zan-list">
        <div class="user-icon-mini" v-for="u in likes" :key="u.id">
          <img :src="u.icon || '/imgs/icons/default-icon.png'" alt="">
        </div>
        <div style="margin-left:10px;text-align: center;line-height: 24px;">{{blog.liked}}人点赞</div>
      </div>
    </div>
    <div class="blog-divider"></div>
    <div class="blog-comments">
      <div class="comments-head">
        <div>网友评价 <span>{{this.messageAll.length}}条</span></div>
        <div><i class="el-icon-arrow-right"></i></div>
      </div>
      <div class="comment-list">
        <div class="comment-box" v-for="(message,index) in messageAll" :key="index"  v-show="message.parentId==0">
          
           <div class="comment-icon">
            <img
                :src="message.icon || '/imgs/icons/default-icon.png'"
                alt="">
          </div>
          <div class="comment-info">
            <div class="comment-user">{{message.nickName}}<span v-if="message.userId==blog.userId" style="color:red;background-color:pink">作者</span><span>VIP{{message.level}}</span>  <span style="color:SaddleBrown;background-color:white">{{message.createTime}}</span></div>
          
            <div style="padding: 5px 0; font-size: 14px;color:">
              {{message.content}}
            </div>
		  <span style="color:skyblue" @click="drawer=true;placeholder='回复@'+message.nickName+':'+message.content;isReply=true;answerId=message.id;isPinJia=true;size='42%'">回复</span>
		
		  
		  <el-popconfirm
			  title="确定删除该评论吗？"
			  @confirm="deleteComment(message.id)"
			>

		   <span slot="reference" style="color:red;margin-left:10px"  v-show="user.id===message.userId">删除<i class="el-icon-delete"></i></span>
		   </el-popconfirm>
            <div class="comment-images">
         
            </div>
			<!-- 回复的内容-->
			<div v-for="(reply,index) in replyList" v-show="reply.parentId===message.id">
			  <div class="reply-icon" style="float:left">
            <img
                :src="reply.icon || '/imgs/icons/default-icon.png'"
                alt="">
          </div>
		  <span style="font-size:13px">
			    <div class="reply-user" style="font-size:13px">{{reply.nickName}}<span style="color:green;background-color:white;font-size:10px">
				<span v-if="reply.userId==blog.userId" style="color:red;background-color:pink;font-size:10px">作者</span>VIP{{reply.level}}</span>回复@<span style="background-color:pink;font-size:10px">{{reply.answerName}}</span></div>
          </span>
            <div style="padding: 1px 0; font-size: 12px;color:white;background-color:brown">
              {{reply.content}}
            </div>
		  <span style="color:skyblue" @click="drawer=true;placeholder='回复@'+reply.nickName+':'+reply.content;isReply=true;answerId=reply.id;isPinJia=true">回复</span>
		
		  
		  <el-popconfirm
			  title="确定删除该评论吗？"
			  @confirm="deleteComment(reply.id)"
			>

		   <span slot="reference" style="color:red;margin-left:10px"  v-show="user.id===reply.userId">删除<i class="el-icon-delete"></i></span>
		   </el-popconfirm>
			 <span style="color:SaddleBrown;background-color:white;">{{reply.createTime}}</span>
			</div>
            <i class="el-icon-caret-bottom"  @click="showReply(message.id);isShowReply=!isShowReply; tempreplyList=['1'];">点击展开回复</i>
          </div>
		 
        </div>
        <div
            style="display: flex; justify-content: space-between;padding: 15px 0; border-top: 1px solid #f1f1f1; margin-top: 10px;">
          <div>查看全部评价</div>
          <div><i class="el-icon-arrow-right"></i></div>
        </div>
      </div>
    </div>
    <div class="blog-divider"></div>
  </div>
  <div class="foot">
    <div class="foot-box">
      <div class="foot-view"  @click="addLike()">
        <svg t="1646634642977" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2187" width="26" height="26">
          <path d="M160 944c0 8.8-7.2 16-16 16h-32c-26.5 0-48-21.5-48-48V528c0-26.5 21.5-48 48-48h32c8.8 0 16 7.2 16 16v448zM96 416c-53 0-96 43-96 96v416c0 53 43 96 96 96h96c17.7 0 32-14.3 32-32V448c0-17.7-14.3-32-32-32H96zM505.6 64c16.2 0 26.4 8.7 31 13.9 4.6 5.2 12.1 16.3 10.3 32.4l-23.5 203.4c-4.9 42.2 8.6 84.6 36.8 116.4 28.3 31.7 68.9 49.9 111.4 49.9h271.2c6.6 0 10.8 3.3 13.2 6.1s5 7.5 4 14l-48 303.4c-6.9 43.6-29.1 83.4-62.7 112C815.8 944.2 773 960 728.9 960h-317c-33.1 0-59.9-26.8-59.9-59.9v-455c0-6.1 1.7-12 5-17.1 69.5-109 106.4-234.2 107-364h41.6z m0-64h-44.9C427.2 0 400 27.2 400 60.7c0 127.1-39.1 251.2-112 355.3v484.1c0 68.4 55.5 123.9 123.9 123.9h317c122.7 0 227.2-89.3 246.3-210.5l47.9-303.4c7.8-49.4-30.4-94.1-80.4-94.1H671.6c-50.9 0-90.5-44.4-84.6-95l23.5-203.4C617.7 55 568.7 0 505.6 0z" p-id="2188" :fill="blog.isLike ? '#ff6633' : '#82848a'"></path>
        </svg>
        <span :class="{liked: blog.isLike}">{{blog.liked}}</span>
      </div>
    </div>
    <div style="width: 40%">
    </div>
    <div class="foot-box">
	<!-- 评论按钮 -->
      <div class="foot-view" @click="drawer = true;placeholder='评论该博文(最少发两个字)';isReply=false;isPinJia=true;size='42%'"><i class="el-icon-chat-square"><span style="font-size:12px">{{this.messageAll.length}}</span></i></div>
    </div>
  </div>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="./js/element.js"></script>
<script src="./js/common.js"></script>
<script>
  let each = function (ary, callback) {
    for (let i = 0, l = ary.length; i < l; i++) {
      if (callback(ary[i], i) === false) break
    }
  }
  const app = new Vue({
    el: "#app",
    data: {
	isPinJia:true,//是否为评价
	size:'42%',//抽屉的大小
	title:'评价',
	    drawer: false,
        direction: 'ttb', //从上往下开  btt从下往上开
	   disabled : false ,//留言按钮禁用
	   message: '',//评论内容
      util,
	  isShowReply:false,//是否展示回复
	  answerId: '',//回复的评论的id
	  placeholder:'评论该博文(最少发两个字)',
	  isReply:false,//是否为回复
	  replyList:[],//回复的内容
	  tempreplyList:["1"],//中转储存回复的内容
      blog: {},
      shop: {},
      likes: [],
	  messageAll:[],
      user: {}, // 登录用户
      followed: false, // 是否关注了
      _width: 0,
      duration: 300,
	  isPin: '',//评论返回的结果
	  typePin: '',//根据评论返回的结果，变更success或者error
      container: null,
      items: [],
      active: 0,
      start: {
        x: 0,
        y: 0
      },
      move: {
        x: 0,
        y: 0
      },
      sensitivity: 60,
      resistance: 0.3
    },
    created() {
	
      let id = util.getUrlParam("id");
      this.queryBlogById(id);
	  this.queryAllmessage(id);
    },
	<!-- watch:{ -->
	<!-- tempreplyList:{ -->
	   <!-- handler(newValue,oldValue){ -->
                        <!-- console.log('isHot被修改了',newValue,oldValue) -->
                    <!-- } -->
	
	<!-- } -->
	  
	<!-- }, -->
    methods: {
      init() {
        // 获得父容器节点
        this.container = this.$refs.swiper
        // 获得所有的子节点
        this.items = this.container.querySelectorAll('.swiper-item')
        this.updateItemWidth()
        this.setTransform()
        this.setTransition('none')
      },
      goBack(num) {
       
		if(num==1){
		 this.$message({
            message: '删除博文《'+this.blog.title+'》成功',
           type: 'success' ,
		    duration: 2000
		    })
		}
		 history.back();
      },
	  //回复某一评价
	    reply(parentId){
	     
	  },
	  //举报博客
	  jubao(){
	  if(this.user.nickName==null||this.user.nickName==''){
	   this.$message({
	  message: '登录后在进行操作',
	  type: 'error'
	  
	  })
	  return;
	  }
	  this.drawer=false;
	  this.$message({
	  message: '举报博文《'+this.blog.title+'》成功,感谢你的反馈',
	  type: 'success'
	  
	  })
	  },
	  //删除博客
	  deleteBlog(){
	      axios.delete("/blog/deleteById/"+this.blog.id)
		 .then(({data})=>{
		 //返回
		      this.$message({
            message: '博客'+data,
           type: 'success' 
		    })
	        
	     })
		   this.goBack(1);
	  },
	  
	  //查看某一评论下回复
	  showReply(id){
	  
	 // console.log("isShowReply："+this.isShowReply)
	   if(!this.isShowReply){
		   this.replyList='';
		   return;
		   }
		   if(this.tempreplyList==''||this.tempreplyList==null){
		      this.$message({
            message: '这个评论没有回复',
           type: 'info' 
		    })
		  return;
		   }
		
	       axios.get("/blog-comments/showReplys/"+id)
		 .then(({data})=>{
		  this.queryAllmessage(this.blog.id);
		this.replyList=data;
		this.tempreplyList=data;
	     if(data==''||data==null){
		    this.$message({
          message: '这个评论没有回复!!',
          type: 'info' 
		 })
		}
		})
		 
	
		
	  },
	  
	  //查询这篇下的所有评价
	  queryAllmessage(id){
	      
		   axios.get("/blog-comments/allMessage/"+id)
		 .then(({data})=>{
		this.messageAll=data;
		 })
  
	  },
	  //删除某评价
	  deleteComment(id){
	    
	     axios.delete("/blog-comments/deleteById/"+id)
		 .then(({data})=>{
		 //刷新
	         this.queryAllmessage(this.blog.id);
	     })
	
		  this.$message({
          message: '删除成功',
          type: 'success' 
        });
			
	  
	  
	  },
      toOtherInfo(){
        if(this.blog.userId === this.user.id){
          location.href = "/info.html"
        }else{
          location.href = "/other-info.html?id=" + this.blog.userId
        }
      },
	  //评论
	  onSubmit(){
	  if(this.user.nickName===''||this.user.nickName==null){
	   this.$message({
          message: '请登录后在评论',
          type: 'error' 
        });	
		  this.message='';
	  return;
	  }
	  
	  if(this.message.length<2 ){
          this.$message.error("评论内容至少为2个字");
          return
        }	
	  if(this.isReply){
		   axios({
			   headers: {
				   'Content-Type': 'application/json; charset=utf-8'
			   },
			   method: 'post',
			   url: '/blog-comments/reply',
			    data: {
				      userId: this.user.id,
			          answerId: this.answerId,
					  blogId: this.blog.id,
                        message: this.message}
		   }).then(({data}) => {
		
			 this.queryAllmessage(this.blog.id);
		   })
		
		   this.$message({
          message: '回复成功',
          type: 'success' 
        });	
	    this.message='';
		this.
       return;
   }
	  
	//alert("评论内容"+this.message+":"+"用户:"+this.user.id+"这篇博客id"+this.blog.id);
	
	
	
		   axios({
			   headers: {
				   'Content-Type': 'application/json; charset=utf-8'
			   },
			   method: 'post',
			   url: '/blog-comments/content',
			    data: {
				      userId: this.user.id,
			          blogId: this.blog.id,
                        message: this.message}
		   }).then(({data}) => {
		      <!-- this.relMess=data
			 <!--  console.log(this.relMess) --> -->
			 console.log("data数据时"+data)
			 this.isPin=data;
			 this.queryAllmessage(this.blog.id);
			console.log("this.isPin："+this.isPin)
		   })
		
		   this.$message({
          message: '评论成功',
          type: 'success' 
        });
		
	 this.message='';
	},
      queryBlogById(id) {
        axios.get("/blog/" + id)
          .then(({data}) => {
            data.images = data.images.split(",")
            this.blog = data;
            this.$nextTick(this.init);
            this.queryShopById(data.shopId)
            this.queryLikeList(id);
            this.queryLoginUser();
          })
          .catch(this.$message.error)
      },
      queryShopById(shopId) {
	  //没有关联商户时，不查询
	  if(shopId==''||shopId==null){
	  
	  return;
	  }
        axios.get("/shop/" + shopId)
          .then(({data}) => {
            data.image = data.images.split(",")[0]
            this.shop = data
          })
          .catch(this.$message.error)
      },
      queryLikeList(id){
        axios.get("/blog/likes/" + id)
          .then(({data}) => this.likes = data)
          .catch(this.$message.error)
      },
      addLike(){
        axios.put("/blog/like/" +this.blog.id)
          .then(({data}) => {
            axios.get("/blog/" + this.blog.id)
              .then(({data}) => {
                data.images = data.images.split(",")
                this.blog = data;
                this.queryLikeList(this.blog.id);
              })
              .catch(this.$message.error)
          })
          .catch(err => {
            this.$message.error(err)
          })
      },
      isFollowed(){
        axios.get("/follow/or/not/" + this.blog.userId)
          .then(({data}) => this.followed = data)
          .catch(this.$message.error)
      },
      follow(){
        axios.put("/follow/" + this.blog.userId + "/" + !this.followed)
          .then(() => {
            this.$message.success(this.followed ? "已取消关注" : "已关注")
            this.followed = !this.followed
          })
          .catch(this.$message.error)
      },
      formatTime(b) {
        return b.getFullYear() + "年" + (b.getMonth() + 1) + "月" + b.getDate() + "日 ";
      },
      formatMinutes(m) {
        if (m < 10) m = "0" + m
        return m;
      },
      queryLoginUser(){
        // 查询用户信息
        axios.get("/user/me")
          .then(({ data }) => {
            // 保存用户
            this.user = data;
            if(this.user.id !== this.blog.userId){
              this.isFollowed();
            }
          })
          .catch(console.log)
      },
      // 获取父容器宽度，并且更新所有的子节点宽度，因为我们默认所有子节点的宽高等于父节点的宽高
      updateItemWidth() {
        this._width = this.container.offsetWidth || document.documentElement.offsetWidth
      },
      // 根据当前活动子项的下标计算各个子项的X轴位置
      // 计算公式(子项的下标 - 当前活动下标) * 子项宽度 + 偏移(手指移动距离)；
      setTransform(offset) {
        offset = offset || 0
        each(this.items, (item, i) => {
          let distance = (i - this.active) * this._width + offset
          let transform = `translate3d(${distance}px, 0, 0)`
          item.style.webkitTransform = transform
          item.style.transform = transform
        })
      },
      // 给每一个子项添加transition过度动画
      setTransition(duration) {
        duration = duration || this.duration
        duration = typeof duration === 'number' ? (duration + 'ms') : duration
        each(this.items, (item) => {
          item.style.webkitTransition = duration
          item.style.transition = duration
        })
      },
      moveStart(e) {
        console.log('moveStart')
        this.start.x = e.changedTouches[0].pageX
        this.start.y = e.changedTouches[0].pageY
        this.setTransition('none')
      },
      moving(e) {
        console.log('moving')
        e.preventDefault()
        e.stopPropagation()
        let distanceX = e.changedTouches[0].pageX - this.start.x
        let distanceY = e.changedTouches[0].pageY - this.start.y
        if (Math.abs(distanceX) > Math.abs(distanceY)) {
          this.isMoving = true
          this.move.x = this.start.x + distanceX
          this.move.y = this.start.y + distanceY
          // 当活动子项为第一项且手指向右滑动或者活动项为最后一项切向左滑动的时候，添加阻力，形成一个拉弹簧的效果
          if ((this.active === 0 && distanceX > 0) || (this.active === (this.items.length - 1) && distanceX < 0)) {
            distanceX = distanceX * this.resistance
          }
          this.setTransform(distanceX)
        }
      },
      moveEnd(e) {
        console.log('moveEnd')
        if (this.isMoving) {
          e.preventDefault()
          e.stopPropagation()
          let distance = this.move.x - this.start.x
          if (Math.abs(distance) > this.sensitivity) {
            if (distance < 0) {
              this.next()
            } else {
              this.prev()
            }
          } else {
            this.back()
          }
          this.reset()
          this.isMoving = false
        }
      },
      next() {
        let index = this.active + 1
        // 运用动画切换到指定下标的子项
        this.go(index)
      },
      prev() {
        let index = this.active - 1
        // 运用动画切换到指定下标的子项
        this.go(index)
      },
      reset() {
        this.start.x = 0
        this.start.y = 0
        this.move.x = 0
        this.move.y = 0
      },
      back() {
        this.setTransition()
        this.setTransform()
      },
      destroy() {
        this.setTransition('none')
      },
      // 运用动画切换到指定下标的子项
      go(index) {
        this.active = index
        if (this.active < 0) {
          this.active = 0
        } else if (this.active > this.items.length - 1) {
          this.active = this.items.length - 1
        }
        this.$emit('change', this.active)
        this.setTransition()
        this.setTransform()
      }
    }
  })
</script>
</body>
</html>